<template>
    <div class="bond-trading-form">
        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="订单方向:">
                    <el-select v-model="riskOrderForm.orderDirection" size="mini">
                        <el-option v-for="i in orderDirectionSelectData" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="指令用途:">
                    <el-select v-model="riskOrderForm.orderPurpose" size="mini">
                        <el-option v-for="i in orderPurposeSelectData" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="存款利率:"
                    ><el-input-number
                        v-model="riskOrderForm.depositRate"
                        :precision="2"
                        :min="0"
                        controls-position="right"
                        size="mini"
                    ></el-input-number
                ></el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="指令优先级:">
                    <el-select v-model="riskOrderForm.orderLevel" size="mini">
                        <el-option v-for="i in orderLevelSelectData" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="指令金额:">
                    <el-tooltip v-if="riskOrderForm.orderBalance" placement="top" :content="computedorderBalanceChinese">
                        <el-input-number
                            v-model="riskOrderForm.orderBalance"
                            :precision="2"
                            :min="0"
                            controls-position="right"
                            size="mini"
                        ></el-input-number>
                    </el-tooltip>
                    <el-input-number
                        v-else
                        v-model="riskOrderForm.orderBalance"
                        :precision="2"
                        :min="0"
                        controls-position="right"
                        size="mini"
                    ></el-input-number>
                </el-form-item>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row class="form-row">
            <el-col>
                <el-form-item label="银行序号:">
                    <el-select
                        v-model="riskOrderForm.bankCode"
                        @change="getOrdersDirection"
                        filterable
                        remote
                        :remote-method="searchBankCodeList"
                        :loading="selectLoading"
                        style="width: 100%"
                        size="mini"
                    >
                        <el-option v-for="i in stockCodeSelectData" :key="i.bankCode" :label="i.bankCode + ' ' + i.bankName" :value="i.bankCode">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="存款类型:">
                    <el-select v-model="riskOrderForm.depositType" size="mini" @change="riskOrderForm.noticeType = ''">
                        <el-option v-for="i in depositTypeSelectData" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="支取限制:">
                    <el-select v-model="riskOrderForm.advanceLimitFlag" size="mini">
                        <el-option
                            v-for="i in advanceLimitFlagSelectData"
                            :key="i.dictKey"
                            :label="i.dictKey + ' ' + i.dictKeyName"
                            :value="i.dictKey"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="通知存款类型:">
                    <el-select v-model="riskOrderForm.noticeType" :disabled="riskOrderForm.depositType !== '2'" size="mini">
                        <el-option v-for="i in noticeTypeSelectData" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="通知天数:">
                    <el-input-number
                        :disabled="riskOrderForm.depositType !== '2'"
                        v-model="riskOrderForm.noticeDays"
                        :min="0"
                        controls-position="right"
                        size="mini"
                    ></el-input-number>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="到期类型:">
                    <el-select v-model="riskOrderForm.mutureType" size="mini">
                        <el-option v-for="i in mutureTypeSelectData" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="存款期限(天):"
                    ><el-input-number v-model="riskOrderForm.depositLimitTime" :min="0" controls-position="right" size="mini"></el-input-number
                ></el-form-item>
            </el-col>
        </el-row>
        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="计息开始日:"
                    ><el-date-picker
                        v-model="riskOrderForm.depositStartDate"
                        type="date"
                        format="yyyyMMdd"
                        value-format="yyyyMMdd"
                        placeholder="请选择"
                        size="mini"
                        style="width: 120px"
                    ></el-date-picker
                ></el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="到期日:"
                    ><el-date-picker
                        v-model="riskOrderForm.mutureDate"
                        type="date"
                        format="yyyyMMdd"
                        value-format="yyyyMMdd"
                        size="mini"
                        style="width: 120px"
                        placeholder="请选择"
                    ></el-date-picker
                ></el-form-item>
            </el-col>
        </el-row>
        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="银行账号:"><el-input v-model="riskOrderForm.depositAccountNo" size="mini"></el-input></el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="合同序号:"><el-input v-model="riskOrderForm.contractCode" size="mini"></el-input></el-form-item>
            </el-col>
        </el-row>
        <el-row class="form-row">
            <el-col :span="12">
                <el-form-item label="银行分行:"><el-input v-model="riskOrderForm.bankBranchCode" size="mini"></el-input></el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="撤单类型:">
                    <el-select v-model="riskOrderForm.cancelType" size="mini">
                        <el-option v-for="i in cancelTypeSelectData" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
import Invest from '@/common/dict/invest';
import { objToArr, SGU_CACHE } from '@/utils/diction-const-util';
import { NumberToWords } from '@/utils/tools';
import { getUser } from '@/utils/user-util';
import { Component, Vue, Watch } from 'vue-property-decorator';
import XEUtils from 'xe-utils';
@Component({
    name: 'DepositOrder',
})
export default class DepositOrder extends Vue {
    private riskOrderForm = {
        orderDirection: 'F',
        orderUser: getUser().userCode,
        orderPurpose: '1',
        marketCode: '6',
        depositRate: undefined,
        orderLevel: '1',
        orderBalance: undefined,
        contractCode: '',
        bankCode: '',
        depositAccountNo: '',
        depositStartDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
        mutureDate: '',
        mutureType: '1',
        depositLimitTime: undefined,
        advanceLimitFlag: '1',
        bankBranchCode: '',
        depositType: '1',
        cancelType: '3',
        noticeDays: undefined,
        noticeType: '',
    };
    Invest: any = new Invest();

    investPriceSelectData: any[] = []; // 价格模式下拉框数据

    investTypeSelectData: any[] = []; // 投资类型下拉框数据

    orderPurposeSelectData: any[] = []; // 指令用途下拉框数据

    orderLevelSelectData: any[] = []; // 指令优先级下拉框数据

    depositTypeSelectData: any[] = []; // 存款类型下拉数据

    advanceLimitFlagSelectData: any[] = []; // 支取类型下拉数据

    noticeTypeSelectData: any[] = []; // 通知存款类型下拉数据

    mutureTypeSelectData: any[] = []; // 到期期限下拉数据

    stockCodeSelectData: any[] = []; // 证券代码下拉框数据

    allStockType: any[] = [];

    allOrderDirection: any[] = []; // 所有订单方向数据

    orderDirectionSelectData: any[] = []; // 订单方向下拉框数据

    cancelTypeSelectData: any[] = []; // 撤单类型下拉框数据

    selectLoading: boolean = false; // 下拉框远程搜索时的加载状态

    // 证券代码下拉框数据相关
    stockCodeMsg = {
        url: '/original/stock/list',
        submit: {
            paging: { total: 0, currentPage: 1, totalPage: 0, pageSize: 20 },
            multStockType: ['15', '3', '4', '5', '6', '>', 'D', 'G', 'K', 'S', 'T'],
            stockCode: '',
        },
    };

    @Watch('riskOrderForm', { immediate: true, deep: true })
    private getForm() {
        this.$emit('getRiskForm', this.riskOrderForm);
    }

    async mounted() {
        // 获取价格模式下拉框数据
        this.investPriceSelectData = await SGU_CACHE('PriceType', '/dict/list/code/Y_000237', []);
        // 获取投资类型下拉框数据
        this.investTypeSelectData = objToArr(this.Invest.investType);
        // 获取指令用途下拉框数据
        this.orderPurposeSelectData = objToArr(Invest.investPurpose);
        // 获取指令优先级下拉框数据
        this.orderLevelSelectData = objToArr(this.Invest.investLevel);
        // 获取存款类型下拉数据
        this.depositTypeSelectData = objToArr(this.Invest.depositType);
        // 获取支取类型下拉数据
        this.advanceLimitFlagSelectData = objToArr(this.Invest.advanceLimitFlag);
        // 获取通知存款类型下拉数据
        this.noticeTypeSelectData = objToArr(this.Invest.noticeType);
        // 获取到期期限下拉数据
        this.mutureTypeSelectData = objToArr(this.Invest.mutureType);
        // 获取银行序号下拉框数据
        this.getBankList('');
        // 获取所有证券类别 (用于筛选订单方向)
        this.allStockType = await SGU_CACHE('StockType', '/dict/stockType/list', []);
        // 获取所有订单方向
        this.allOrderDirection = await SGU_CACHE('TradeDirection', '/dict/tradeDirections', []);
        this.orderDirectionSelectData = this.allOrderDirection.filter(item => ['F', 'i'].includes(item.dictKey));

        // 获取撤单类型下拉框数据
        this.cancelTypeSelectData = objToArr(this.Invest.CancelType);
    }

    // 指令金额 大写中文
    get computedorderBalanceChinese() {
        return NumberToWords(this.riskOrderForm.orderBalance.toString());
    }

    // 远程搜索银行序号
    searchBankCodeList(e: string) {
        this.getBankList(e);
    }

    // 获取银行序号下拉框数据
    getBankList(e) {
        this.selectLoading = true;
        this.$axios
            .post('/baseInfomation/bank/list', {
                bankCode: e,
                paging: {
                    currentPage: 1,
                    pageSize: 20,
                },
            })
            .then((res: any) => {
                this.stockCodeSelectData = res.list || [];
                this.selectLoading = false;
            });
    }

    // 根据证券类别获取订单方向
    private getOrdersDirection(e) {
        this.riskOrderForm.orderDirection = '';
        let stockType = null;
        for (let i = 0; i < this.stockCodeSelectData.length; i++) {
            const ele = this.stockCodeSelectData[i];
            if (ele.stockCode === e) {
                stockType = ele.stockType;
                break;
            }
        }
        let stockTypeE = this.allStockType.find(item => item.dictKey === stockType);
        if (stockTypeE && stockTypeE.param1) {
            this.orderDirectionSelectData = this.allOrderDirection.filter(item => stockTypeE.param1.includes(item.dictKey));
        }
    }
}
</script>
<style lang="scss" scoped>
.el-divider {
    margin: 0;
    margin-top: 5px;
}
.form-row {
    margin-top: 3px;
    .el-form-item--small {
        margin: 0;
        & /deep/ .el-form-item__label {
            color: #575757;
        }
        & /deep/ .el-input__inner {
            height: 28px;
            line-height: 28px;
        }
    }
}
</style>
